<template>
  <n-space :size="0" vertical>
    <n-text v-if="expressName">
      {{ expressTypeName }}
      <n-tag v-if="logisticsUnusualName" type="error" size="small">{{ logisticsUnusualName }}</n-tag>
    </n-text>
    <n-space :size="3" :justify="justify" align="center">
      <n-text>
        {{ expressNo }}
      </n-text>
      <n-text type="info" style="cursor: pointer" @click="handleToClipboard">复制</n-text>
    </n-space>
    <n-popover trigger="click" placement="left">
      <template #trigger>
        <n-text type="info" style="cursor: pointer"> 查看物流 </n-text>
      </template>
      <template #header>
        <n-text strong depth="1">物流信息</n-text>
      </template>
      <p-express-info :order-id="orderId" :type="orderType" />
    </n-popover>
  </n-space>
</template>

<script lang="ts">
  import { computed, defineComponent, reactive, toRefs } from 'vue'
  import { NSpace, NText, NPopover, NTag } from 'naive-ui'
  import PExpressInfo from './info.vue'
  import { useClipboard, useDictionary } from '@/hooks'

  export default defineComponent({
    name: 'XExpress',
    components: {
      NSpace,
      NText,
      NPopover,
      PExpressInfo,
      NTag
    },
    props: {
      // 1-订单物流；2-售后退款物流 3-售后换货物流 4-保单发货物流；5-保单退货物流
      orderType: {
        type: Number,
        default: 1
      },
      expressName: {
        type: Boolean,
        default: true
      },
      justify: {
        type: String,
        default: 'center'
      },
      detail: {
        type: Object,
        default: () => {}
      },
      jstExpress: {
        type: Boolean,
        default: false
      }
    },
    setup($props) {
      const $dictionary = useDictionary()
      const { toClipboard } = useClipboard()
      const $state = reactive({
        ...toRefs($props),
        // 订单id
        orderId: computed(() => $props.detail.orderId || $props.detail.id),
        // 1-订单物流；2-售后退款物流
        expressNo: computed(() => {
          let expressNo = ''
          switch ($props.orderType) {
            case 1:
              expressNo = $props.detail?.expressNo
              break
            case 2:
              expressNo = $props.detail?.returnExpressNo
              break
            case 3:
              expressNo = $props.detail?.exchangeExpressNo
              break
            case 4:
              expressNo = $props.detail?.deliveryExpressNo
              break
            case 5:
              expressNo = $props.detail?.returnExpressNo
              break
            default:
              expressNo = $props.detail?.expressNo
              break
          }
          return expressNo
        }),
        // 物流公司名称
        expressTypeName: computed(() => {
          let expressType = ''
          switch ($props.orderType) {
            case 1:
              expressType = $props.detail?.expressType
              break
            case 2:
              expressType = $props.detail?.returnExpressType
              break
            case 3:
              expressType = $props.detail?.exchangeExpressType
              break
            case 4:
              expressType = $props.detail?.deliveryExpressType
              break
            case 5:
              expressType = $props.detail?.returnExpressType
              break
            default:
              expressType = $props.detail?.expressType
              break
          }
          return $dictionary.find(expressType, $props.jstExpress ? 'SHOW_EXPRESS_TYPE' : 'EXPRESS_TYPE')
        }),
        // 异常物流
        logisticsUnusualName: computed(() => {
          if ($props.detail?.expressStatus) {
            return $dictionary.find($props.detail?.expressStatus, 'ORDER_EXPRESS_STATUS')
          } else {
            return null
          }
        })
      })

      // 复制物流编号
      const handleToClipboard = () => {
        toClipboard($state.expressNo)
      }

      return {
        ...toRefs($state),
        handleToClipboard
      }
    }
  })
</script>

<style></style>
